<template>
<div class="btn-box">
  <mu-flexbox v-show="data.isShow" :gutter="0">
    <mu-flexbox-item class="flex-item">
      <mu-flat-button label="选中" class="flat-button" color="#ffffff" backgroundColor="#301B91" rippleColor="#b39ddb" :rippleOpacity="0.2"/>
    </mu-flexbox-item>
    <mu-flexbox-item class="flex-item">
      <mu-flat-button label="屏蔽" class="flat-button" color="#ffffff" backgroundColor="#FF5252" rippleColor="#ffcdd2" :rippleOpacity="0.2"/>
    </mu-flexbox-item>
  </mu-flexbox>
  <mu-flexbox v-show="!data.isShow" :gutter="0">
    <mu-flexbox-item class="flex-item">
      <mu-flat-button v-show="data.value == 1" label="已审核" class="flat-button" color="#ffffff" backgroundColor="#4BAF4F" rippleColor="#ffcdd2" :rippleOpacity="0.2"/>
      <mu-flat-button v-show="data.value == 0" label="已屏蔽" class="flat-button" color="#ffffff" backgroundColor="#FF5252" rippleColor="#ffcdd2" :rippleOpacity="0.2"/>
    </mu-flexbox-item>
  </mu-flexbox>
</div>
</template>
<script>
  import Schart from 'vue-schart';
  export default {
    props:['data'],
    data () {
      return {
      }
      
    },
    components : {
    },
    methods: {
    },
    mounted() {
      this.data = {
        isShow:false,
        value:0
      }
    },
  }
</script>

<style lang="css">
.btn-box{
  display: inline-block;
  width:260px;
  overflow:hidden;
  border-radius: 6px;
}
.flex-item {
  height: 32px;
  /*background-color: #e0e0e0;*/
  text-align: center;
  line-height: 32px;
}
.flat-button{
  width: 100%;
  height:100%;
}</style>